<template>
    <el-dialog
        :title="titleMap[state.mode]"
        v-model="state.visible"
        :width="800"
        destroy-on-close
        @closed="$emit('closed')"
    >
        <el-form
            :model="form"
            :rules="rules"
            :disabled="state.mode == 'show'"
            ref="dialogFormRef"
            label-width="100px"
        >
            <el-form-item label="翻译场景" prop="scene">
                <el-radio-group v-model="form.scene">
                    <el-radio value="1" size="large" border>页面</el-radio>
                    <el-radio value="2" size="large" border>接口</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="原文" prop="originalText">
                <el-input v-model="form.originalText" placeholder="请输入原文">
                    <template #append>
                        <el-button type="success" @click="robotTranslate">火山翻译</el-button>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item label="译文" prop="translationList">
                <kitego-form-table
                    :hideAdd="true"
                    :hideDelete="true"
                    :data="form.translationList"
                    :columns="columns"
                    emptyText="暂无数据"
                >
                    <template #translation="scope">
                        <el-input
                            v-model="scope.row.translation"
                            placeholder="请输入译文"
                        ></el-input>
                    </template>
                </kitego-form-table>
            </el-form-item>
            <el-form-item label="排序值" prop="sort">
                <el-input v-model="form.sort" placeholder="数值越大越靠前" clearable></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="state.visible = false">取 消</el-button>
            <el-button
                v-if="state.mode != 'show'"
                type="primary"
                :loading="state.isSaving"
                @click="submit()"
                >保 存</el-button
            >
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import type {
    LangTranslationModel,
    TitleMapModel
} from '@/views/maintenance/langSetting/langTranslation/type.ts'
import feedback from '@/utils/feedback.ts'
import { useI18n } from 'vue-i18n'
import maintenance from '@/api/modules/maintenance.ts'
import type { ColumnProps } from '@/components/kitegoTable/type.ts'
const { t } = useI18n()

const emit = defineEmits(['success', 'closed'])

const dialogFormRef = ref()

const titleMap = reactive<TitleMapModel>({
    add: t('新增'),
    edit: t('编辑'),
    show: t('查看')
})

interface TranslationListMode {
    langId: number
    translation: string
    lang: string
}
const form = reactive({
    id: '',
    scene: '1',
    originalText: '',
    isDelete: 0,
    sort: 1,
    langId: '',
    translationList: [] as TranslationListMode[]
})

const rules = reactive({
    name: [{ required: true, message: '请输入地区名称' }],
    code: [{ required: true, message: '请输入浏览器语言标识' }]
})

const state = reactive({
    mode: 'add',
    visible: false,
    isSaving: false,
    groups: [],
    groupsProps: {
        value: 'id',
        emitPath: false,
        checkStrictly: true
    }
})

const columns = reactive<ColumnProps[]>([
    { prop: 'langId', label: '语言Id', width: 80 },
    { prop: 'lang', label: '语言类型', width: 180 },
    { prop: 'translation', label: '译文' }
])

defineExpose({
    open,
    setData
})

// 机器翻译
async function robotTranslate() {
    const res = await maintenance.langTranslation.robotTranslate.post({
        originalText: form.originalText,
        langId: form.langId
    })
    form.translationList.forEach((item) => {
        item.translation = res[item.langId]
    })
}

// 获取译文列表
async function getLangOptions() {
    const res = await maintenance.lang.list.get({ page: 1, pageSize: 2000 })
    res.data.forEach((item: any) => {
        if (item.status == 1) {
            form.translationList.push({
                langId: item.id,
                lang: item.langName + '（' + item.langFlag + '）',
                translation: ''
            })
        }
    })
}

// 显示
function open(mode = 'add') {
    state.mode = mode
    state.visible = true

    if (mode == 'add') getLangOptions()
}

// 表单提交方法
async function submit() {
    dialogFormRef.value!.validate()

    state.isSaving = true
    const res = await maintenance.langTranslation.edit.post(form, { await: 1 })
    state.isSaving = false
    if (res) {
        if (state.mode == 'add') {
            form.id = res
        }
        emit('success', form, state.mode)
        state.visible = false
        feedback.success('操作成功')
    }
}

// 表单注入数据
function setData(data: LangTranslationModel) {
    Object.assign(form, data)
}
</script>

<style></style>
